<template>
  <div id="app-container" style="padding: 10px">
    <el-steps :active="detailOrder.orderStatus | StepsActive" align-center>
      <el-step title="车辆驶入" icon="el-icon-success" :description="detailOrder.createTime"></el-step>
      <el-step title="车辆驶离" icon="el-icon-timer" :description="detailOrder.leaveTime"></el-step>
      <el-step title="订单支付" icon="el-icon-finished" :description="detailOrder.payTime"></el-step>
    </el-steps>
    <div style="margin-top: 10px; margin-bottom: 10px; padding: 20px; line-height: 50px; background-color: #eeeeee">
      <span style="font-size: 20px" :class="detailOrder.orderStatus | StatusColor">当前订单状态：{{detailOrder.orderStatus | orderStatus}}</span>
      <el-button style="float: right" type="danger" :disabled="btnDisabled" @click="handleToTackle">异常处理</el-button>
    </div>
    <div style="border: solid 2px #c0c4cc; overflow: hidden">
      <div style="width: 50%; float: left; padding: 10px">
        <p class="OrderMessage">订单编号：<span class="OrderContextColor">{{detailOrder.orderCode}}</span></p>
        <p class="OrderMessage">车牌号码：<span class="OrderContextColor">{{detailOrder.carNumber}}</span></p>
        <p class="OrderMessage">绑定用户：<span class="OrderContextColor">{{detailOrder.userName}}</span></p>
        <p class="OrderMessage">所属路段：<span class="OrderContextColor">{{detailOrder.roadName}}</span></p>
        <p class="OrderMessage">泊位编号：<span class="OrderContextColor">{{detailOrder.berthCode}}</span></p>
        <p class="OrderMessage" style="padding-left: 12px">巡检员：<span class="OrderContextColor">{{detailOrder.inspectorName}}</span></p>
      </div>
      <div style="width: 50%; float: right; padding: 10px; border-left: solid 2px #c0c4cc">
        <p class="OrderMessage">驶入时间：<span class="OrderContextColor">{{detailOrder.createTime}}</span></p>
        <p class="OrderMessage">驶离时间：<span class="OrderContextColor">{{detailOrder.leaveTime}}</span></p>
        <p class="OrderMessage">停车时长：<span class="OrderContextColor">{{detailOrder.parkingTime}}</span></p>
        <p class="OrderMessage">支付金额：<span class="OrderContextColor">¥ {{detailOrder.price}}元</span></p>
        <p class="OrderMessage">支付时间：<span class="OrderContextColor">{{detailOrder.payTime}}</span></p>
        <p class="OrderMessage">支付流水号：<span class="OrderContextColor">{{detailOrder.alipayTrade}}</span></p>
        <p class="OrderMessage">
          <span style="float: left">驶入图片：</span>
          <el-image style="width: 100px; height: 100px" src="#" fit="fill"></el-image>
          <el-image style="width: 100px; height: 100px" src="#" fit="fill"></el-image>
          <el-image style="width: 100px; height: 100px" src="#" fit="fill"></el-image>
        </p>
      </div>
    </div>
    <div style="margin-top: 10px; margin-bottom: 10px; padding: 20px; line-height: 30px; text-align: right; background-color: #eeeeee">
      <span style="font-size: 16px;font-weight: bold;">合计：</span>
      <span v-if="detailOrder.modifyPrice" style="font-size: 24px;font-weight: bold; color: red">{{detailOrder.modifyPrice | BigDecimal}}</span>
      <span v-else-if="detailOrder.price" style="font-size: 24px;font-weight: bold; color: red">{{detailOrder.price | BigDecimal}}</span>
    </div>
    <div style="border: solid 2px #c0c4cc; overflow: hidden">
      <div style="width: 50%; float: left; padding: 10px; border-right: solid 2px #c0c4cc">
        <p class="OrderMessage">申诉内容：<span class="OrderContextColor">{{appeal.content}}</span></p>
        <p class="OrderMessage">
          <span style="float: left">申诉图片：</span>
          <el-image style="width: 100px; height: 100px" src="#" fit="fill"></el-image>
          <el-image style="width: 100px; height: 100px" src="#" fit="fill"></el-image>
          <el-image style="width: 100px; height: 100px" src="#" fit="fill"></el-image>
        </p>
        <p class="OrderMessage">申诉时间：<span class="OrderContextColor">{{appeal.createTime}}</span></p>
      </div>
      <div style="width: 50%; float: right; padding: 10px">
        <p class="OrderMessage">处理情况：<span class="OrderContextColor">{{appeal.status | AppealStatus}}</span></p>
        <p class="OrderMessage">修改金额：<span style="color: deepskyblue; font-weight: normal">{{appeal.modifyPrice | BigDecimal}}（原：{{detailOrder.price | BigDecimal}}）</span></p>
        <p class="OrderMessage">处理时间：<span v-if="appeal.status != '1'" class="OrderContextColor">{{appeal.updateTime}}</span></p>
        <p class="OrderMessage">处理人：<span class="OrderContextColor">{{appeal.handleBy}}</span></p>
        <p class="OrderMessage">留言：<span class="OrderContextColor">{{appeal.handleContent}}</span></p>
      </div>
    </div>

    <!--异常处理弹框-->
    <el-dialog
      :visible.sync="dialogVisible"
      width="50%"
      :close-on-click-modal="false"
      :before-close="beforeClose">
      <span slot="title" class="el-dialog__title">
        <i class="el-icon-edit-outline"></i> 异常处理
      </span>
      <p class="OrderMessage">申诉内容：<span class="OrderContextColor">{{appeal.content}}</span></p>
      <p class="OrderMessage">
        <span style="float: left">申诉图片：</span>
        <el-image style="width: 100px; height: 100px" src="#" fit="fill"></el-image>
        <el-image style="width: 100px; height: 100px" src="#" fit="fill"></el-image>
        <el-image style="width: 100px; height: 100px" src="#" fit="fill"></el-image>
      </p>
      <p class="OrderMessage">申诉时间：<span class="OrderContextColor">{{appeal.createTime}}</span></p>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
        <el-form-item prop="modifyPrice" style="height: 50px">
          <p class="OrderMessage">修改金额：
            <el-input placeholder="请输入核对后的金额" v-model="appeal.modifyPrice" clearable style="width: 600px; margin-left: -5px"></el-input>
          </p>
        </el-form-item>
        <el-form-item prop="handleContent">
          <p class="OrderMessage">
            <span style="float: left">处理意见：</span>
            <el-input
              type="textarea"
              :rows="3"
              placeholder="请输入内容"
              v-model="appeal.handleContent"
              style="width: 600px">
            </el-input>
          </p>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="handleToClose">取 消</el-button>
          <el-button type="danger" @click="handleToReject">驳 回</el-button>
          <el-button type="primary" @click="handleToSure">通 过</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>

import { getDetailById,getAppealByOrderId,handleAppealById } from '../../api/order'

  export default {
    data(){
      return {
        detailOrder: {},                         // 订单数据
        appeal: {                                // 申诉数据
          handleContent: null,
          isPass: null,
          modifyPrice: null
        },
        btnDisabled: false,                      // 异常处理按钮不可用状态
        dialogVisible: false,                    // 异常处理弹框是否显示
        rules: {
          modifyPrice: [],
          handleContent: []
        }
      }
    },
    filters: {
      BigDecimal: function(value) {
        if(value == null){
          return `待核算`
        }
        return `￥ ${parseFloat(value).toFixed(2)} 元`
      },
      orderStatus: function(value) {
        switch (value) {
          case '5':
            return '异常订单-审核中';
          case '6':
            return '异常订单-审核不通过';
          case '7':
            return '异常订单-审核通过';
          default:
            return '未获取到状态';
        }
      },
      StatusColor: function(value) {
        switch (value) {
          case '5':
            return 'Pending';
          case '6':
            return 'NoPass';
          case '7':
            return 'Pass';
          default:
            return 'StatusError';
        }
      },
      StepsActive: function(value) {
        switch (value) {
          case '1':
            return 1;
          case '2':
            return 2;
          case '3':
            return 3;
          default:
            return 3;
        }
      },
      AppealStatus: function(value) {
        switch (value) {
          case '1':
            return '待处理';
          case '2':
            return '不通过';
          case '3':
            return '已通过';
          default:
            return '未获取到状态';
        }
      }
    },
    methods: {
      initData(){
        // 获取路由中的参数
        if(this.$route.params.detailOrderVO != undefined && this.$route.params.detailOrderVO != null){
          this.detailOrder = this.$route.params.detailOrderVO;
        }
        // 通过订单id查询申诉数据
        getAppealByOrderId(this.detailOrder.id).then(res => {
          this.appeal = res.data;
          // 异常处理按钮是否不可点击
          if(this.appeal.status != '1'){
            this.btnDisabled = true;
          }
        })
      },
      flushData(){
        getDetailById(this.detailOrder.id).then(res => {
          this.detailOrder = res.data;
        })
        getAppealByOrderId(this.detailOrder.id).then(res => {
          this.appeal = res.data;
          // 异常处理按钮是否不可点击
          if(this.appeal.status != '1'){
            this.btnDisabled = true;
          }
        })
      },
      // 点击异常处理按钮
      handleToTackle(){
        this.dialogVisible = true; // 显示异常处理弹框
      },
      // 点击处理异常的取消按钮
      handleToClose(){
        this.dialogVisible = false;
        this.appeal.handleContent = null;
        this.appeal.modifyPrice = null;
      },
      // 点击处理异常的通过按钮
      handleToSure(){
        this.appeal.isPass = true;
        this.$confirm('确认通过？',{type: 'warning'})
          .then(_ => {
            this.dialogVisible = false;
            handleAppealById(this.appeal).then(res => {
              this.appeal.handleContent = null;
              this.flushData();
              this.$message({
                type: 'success',
                message: res.message
              });
            })
          })
          .catch(_ => {});
      },
      // 点击处理异常的驳回按钮
      handleToReject(){
        this.appeal.isPass = false;
        this.$confirm('确认驳回？',{type: 'warning'})
          .then(_ => {
            this.dialogVisible = false;
            handleAppealById(this.appeal).then(res => {
              this.appeal.handleContent = null;
              this.flushData();
              this.$message({
                type: 'success',
                message: res.message
              });
            })
          })
          .catch(_ => {});
      },
      // 点击异常处理的关闭按钮
      beforeClose(done){
        this.appeal.handleContent = null;
        this.appeal.modifyPrice = null;
        done();
      }
    },
    created(){
      this.initData();
    }
  }
</script>

<style>
  .Pending{
    color: dodgerblue;
  }
  .NoPass{
    color: red;
  }
  .Pass{
    color: #5bc648;
  }
  .OrderMessage{
    font-size: 14px;
    font-weight: bold;
  }
  .OrderContextColor{
    color: gray;
    font-weight: normal;
  }
</style>
